<template>
  <div class="add-goods-main">
    <Dialog :appDialog="appDialog">
      <div>
        <ZwSearchForm :option="searchOption" @search="search" @reset="reset" />
        <ZwTable 
          ref="tableRef" 
          class="table-box" 
          :option="tableOption" 
          :rowKey="getRowKey" 
          :paramProp="state.paramProp"
          :fetch-params="state.searchParams" 
          :fetch-api="fetchApi()"
          @select="onSelect"
          @select-all="onSelectAll">
        </ZwTable>
      </div>
    </Dialog>
  </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed } from 'vue'
import { deepCopy } from '@/utils/helper'
import { ElMessage, ElButton } from 'element-plus';
import { storeList } from '@/api/member/memberList/index'
import { getPointsProductList, delPointsProduct ,setPointsProduct } from '@/api/member/pointsManage/index'
import Dialog from '@/components/Dialog.vue'
import ZwSearchForm from '@/components/zw/search-form/SearchForm'
import ZwTable from '@/components/zw/table/Table'

const emit = defineEmits(['submit'])

const tableRef = ref<any>(null)

const selectionList = reactive<any>([])

const cancelHandel = () => {
  appDialog.visible = false
}

const submitHandel = async () => {
  if(!selectionList.length) {
    ElMessage.error('请先选择商品')
    return
  }
  let params = {
    product: selectionList.map((el: any) => { 
      return { 
        product_id: el.id,
        amount: 1, 
        points: 1,
        shop_id: el.shop_id
      } 
    })
  }
  let res = await setPointsProduct(params)
  appDialog.visible = false
  emit('submit')

}

const appDialog = reactive<any>({
  visible: false,
  title: '选择商品',
  width: '55%',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '确定'
})

const searchOption = computed(() => {
  return [
    {
      label: '商品名称',
      name: 'name',
      type: 'input',
      clearable: true,
      placeholder: '请输入商品名称'
    },
    {
      label: '来源店铺',
      name: 'shopId',
      type: 'select',
      clearable: true,
      placeholder: '请选择来源店铺',
      fetchOptionApi: () => {
        return new Promise((resolve) => {
          storeList({}).then((res: any) => {
            let list: any = [];
            list = res || []
            resolve(list);
          });
        });
      },
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id
      })
    }
  ]
})

const tableOption = [
  {
    type: 'selection',
    width: 60,
    fixed: 'left'
  },
  {
    prop: 'name',
    label: '商品名称',
    render({ row, column, index }: any) {
      return (
        <div>{ row.name }</div>
      )
    }
  },
  {
    prop: 'price',
    label: '价格（元）',
    render({ row, column, index }: any) {
      return (
        <div>
          {
            row.min_price == row.max_price ? `￥${row.max_price}` : `￥${row.min_price}~￥${row.max_price}`
          }
        </div>
      )
    }
  },
  {
    prop: 'shop_name',
    label: '来源店铺',
  },
]

const defaultParams = {
  type: 3,
  product_name: '', 
  source: '', 
  shop_name: '',
  date: [],
  
}

const state = reactive({
  searchParams: deepCopy(defaultParams),
  paramProp: { page: 'page', pageSize: 'page_size' }
})

const getRowKey = (row: any) => {
  return row.id
}


const search = (data: any) => {
  tableRef.value.getTable().clearSelection()
  state.searchParams = deepCopy({ ...defaultParams, ...data })
}

const reset = () => {
  tableRef.value.getTable().clearSelection()
  state.searchParams = deepCopy({ ...defaultParams })
}

const fetchApi = () => {
  return getPointsProductList
}

const onSelect = (selection: any, row: any):void => {
  console.log(selection,'1',row)
  selectionList.splice(0)
  selectionList.push(...selection)
}

const onSelectAll = (selection: any):void => {
  console.log(selection,'12')
  selectionList.splice(0)
  selectionList.push(...selection)
}

const handlerDel = () => {

}

defineExpose({
  appDialog
})

</script>
<style lang="scss" scoped>
.add-goods-main {

}


</style>